<template>
    <div>
        <userDialog :dialogTitle="dialogTitle" :centerDialogVisible="visible" @updateVisible="updateVisible"
            @resetPopupData="resetPopupData" @submitPopupData="submitPopupData" :popupWidth="'90%'" :popupTop="'20vh'">
            <div>
                <div>
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column prop="releaseId" align="center" label="任务ID"></el-table-column>
                        <el-table-column prop="seriesName" align="center" label="所属系列" ></el-table-column>
                        <el-table-column prop="createTime" align="center" label="主图" >
                            <template v-slot="scope">
                                <el-image 
                                    style="width: 60px"
                                    :src="scope.row.mainImage" 
                                    :preview-src-list="[scope.row.mainImage]">
                                </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="outGoodsId" align="center" label="商品ID" ></el-table-column>
                        <el-table-column prop="goodsTitle" align="center" label="标题" show-overflow-tooltip ></el-table-column>
                        <el-table-column prop="releaseStatus" align="center" label="发布状态" ></el-table-column>
                        <el-table-column prop="releaseTime" align="center" label="发布时间" ></el-table-column>
                        <el-table-column prop="message" align="center" label="消息" ></el-table-column>
                        <el-table-column prop="status" align="center" label="操作" width="180">
                            <template slot-scope="scope">
                                <div>
                                    <el-button type="primary" link>重试</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getList" />

            </div>
            <template #footer>
                <div></div>
            </template>

        </userDialog>
    </div>
</template>

<script>
import userDialog from '@/components/Dialog'
import {
    queryReleaseDetail,
} from "@/api/product/productInfo";
import { onMounted } from 'vue';
export default {
    components: {
        userDialog,
    },
    props: {
        releaseId: {
            type: Number,
            default: '',
        },
        dialogTitle: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            visible: true,
            tableData: [],
            total: 0,
            // 查询参数
            queryParams: {
                currentPage: 1,
                pageSize: 10,
                productNum: undefined,
                productName: undefined,
                productType: undefined,
                state: undefined,
                tradeFace: undefined
            },


        }
    },
    computed: {

    },
    mounted() {
        this.getList()
    },
    watch: {
        queryParams(val) {
            if(val) this.getList()
        }
    },
    methods: {
        updateVisible(visible) {
            this.$emit('closeDialog', visible)
        },
        resetPopupData() {

        },
        submitPopupData() {

        },
        getList() {
            const params = {
                ...this.queryParams,
                id: this.releaseId
            }
            queryReleaseDetail(params).then(res => {
                this.tableData = res.value?.list
                this.total = res.value?.total
            })
        }


    }
}
</script>

<style lang="scss" scope>
.dialog_tips {
    margin-bottom: 10px;
    padding: 15px;
    line-height: 1.8;
    border-left: 5px solid #16b777;
    border-radius: 0 2px 2px 0;
    background-color: #fafafa;
}
</style>